import QtQuick 1.0
import QtMobility.location 1.1
import "G.js" as G
import "Storage.js" as Storage

Rectangle {
    id: idRecommend
    width: 480
    height: 800
    color: '#333333'

    Component.onCompleted: {
        Storage.initialize();
        var token = Storage.getSetting("whatserToken")
        //console.log(token)
        if (token != "Unknown") {
            G.g.token = token;
            idRecommend.state = "LoggedIn";
        } else {
            idLoginSignup.state = "LoggedOut";
        }
    }

    gradient: Gradient {
        GradientStop {
            position: 0.00;
            color: "#333333";
        }
        GradientStop {
            position: 1.00;
            color: "#666666";
        }
    }

    PositionSource {
        id: positionSource
        active: true
        updateInterval: 1000
        onPositionChanged: {
            G.g.latitude = position.coordinate.latitude;
            G.g.longitude = position.coordinate.longitude;
        }
    }

    Loading {
        id: idImageLoading
        anchors.top: idHeader.bottom
        anchors.topMargin: 37
        anchors.horizontalCenter: idLoginSignup.horizontalCenter
        rotation: 270
        visible: true
        opacity: 0
    }

    Header { id: idHeader;
        opacity: 1;
        height: 64 + 15
        width:  parent.width
        z: 4

        onRefresh: {
            if (idSpotsList.opacity != 0) {
                idRecommend.state = "LoggedIn"
            }
        }
        onLogout: {
            G.g.token = G.g.defaultToken;
            Storage.clearSetting("whatserToken");
            idRecommend.state = ""
            idLoginSignup.state = "LoggedOut";
        }
    }

    MessageBox { id: idMessageBox; opacity: 0 }

    LoginSignup { id: idLoginSignup; opacity: 1;
        anchors.top: idHeader.bottom
        anchors.topMargin: 15
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        state: "HiddenUp"

        onLoggingIn: idRecommend.state = "LoggingIn"
        onLoginSuccess: idRecommend.state = "LoggedIn"
        onSigningIn: idRecommend.state = "LoggingIn"
        onLoginError: { idRecommend.state = ""; idLoginSignup.state = "LoggedOut"; idMessageBox.text = message; idMessageBox.opacity = 1}
        onSignupError: { idRecommend.state = ""; idLoginSignup.state = "LoggedOut"; idMessageBox.text = "Invalid username / password"; idMessageBox.opacity = 1}
    }


    function loadImage(url) {
        var component = Qt.createComponent("FullScreenImage.qml");
        if (component.status == Component.Ready) {
            var fullimage = component.createObject(idRecommend);
            fullimage.url = url;
        }
    }


    Loader {
        id: imageLoader
        anchors.fill: parent
        property string url
        onLoaded: {
            console.log(url)
            item.url = url

        }
    }

    SpotList {
        id: idSpotsList
        anchors.top: idRecommend.top
        anchors.topMargin: idRecommend.height
        opacity: 0
        onSpotsSuccess: idRecommend.state = "NearbySpotsLoaded"
        onRecommended: {
            idComment.spotId = spotId; idComment.inCollection = spotInCollection; idComment.opacity = 1; }
        onRefresh: {
            if (idSpotsList.opacity != 0) {
                idRecommend.state = "Refreshing"
            }
        }
        onImageSelected: {
            imageLoader.url = url
            loadImage(url)

        }
        Behavior on opacity { NumberAnimation { duration: 300 }}
        Behavior on anchors.topMargin { NumberAnimation { duration: 300 }}
    }

    Comment {
        id: idComment
        anchors.top: idHeader.bottom
        anchors.bottom: idRecommend.bottom
        anchors.left: idRecommend.left
        anchors.right: idRecommend.right
        anchors.margins: 20
        opacity: 0

        property int spotId
        property bool inCollection

        onOkPressed: {
            recommendWorker.sendMessage({'spotId': idComment.spotId, 'spotInCollection': idComment.inCollection, 'userMessage': userMessage, 'g': G.g})
        }

        Behavior on opacity { NumberAnimation { duration: 100 } }

        WorkerScript {
            id: recommendWorker
            source: "AddToCollection.js"
            onMessage: {

                idRecommend.state = "Added"
            }
        }
    }



    states: [
        State {
            name: "LoggingIn"
            PropertyChanges { target:idImageLoading; opacity: 1; }
        },
        State {
            name: "LoggedIn"
            PropertyChanges { target:idImageLoading; opacity: 1; }
            PropertyChanges { target:idLoginSignup; state: "LoggedIn"; }
            PropertyChanges { target:idSpotsList; state:"LoadingSpots"; }
        },
        State {
            name: "Refreshing"
            PropertyChanges { target:idImageLoading; opacity: 1; }
            PropertyChanges { target:idLoginSignup; state: "LoggedIn"; }
        },
        State {
            name: "NearbySpotsLoaded"

            PropertyChanges { target:idImageLoading; opacity: 0; }
            PropertyChanges { target:idSpotsList; state:"LoadedSpots"; }
            PropertyChanges { target:idSpotsList; opacity: 1 }
            PropertyChanges { target:idSpotsList; anchors.topMargin: 0 }
            AnchorChanges {
                target:idSpotsList;
                anchors.top: idHeader.bottom;
                anchors.bottom: idRecommend.bottom;
                anchors.left: idRecommend.left;
                anchors.right: idRecommend.right;
            }
            PropertyChanges {
                target:idSpotsList;
                anchors.topMargin: 15;
            }
            PropertyChanges { target:idComment; opacity: 0; }
            PropertyChanges { target:idComment; text: ""; }
        },
        State {
            name: "Added"

            PropertyChanges { target:idComment; opacity: 0; }
            PropertyChanges { target:idComment; text: ""; }
            PropertyChanges { target:idImageLoading; opacity: 1; }
            PropertyChanges { target:idMessageBox; text: "Done!"; }
            PropertyChanges { target:idMessageBox; opacity: 1; }

            PropertyChanges { target:idLoginSignup; state: "LoggedIn"; }
            PropertyChanges { target:idSpotsList; state:"LoadingSpots"; }
        }

    ]

}
